<!DOCTYPE html>
<%@page import="ar.com.cema.methodology.analyzer.ui.ServiceLocator"%>
<%@page import="ar.com.cema.methodology.analyzer.ui.PageDirectory"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="<%=ServiceLocator.CDN%>/css/main.css">
		<script type="text/javascript" src="<%=ServiceLocator.CDN%>/js/jquery.min.js" ></script>
		<script type="text/javascript" src="<%=ServiceLocator.CDN%>/js/jquery.json-2.3.min.js" ></script>
		<script type="text/javascript" src="<%=ServiceLocator.CDN%>/js/listbox-utils.js" ></script>
		<script type="text/javascript" src="<%=ServiceLocator.CDN%>/js/ui/UI.js" ></script>
		<script type="text/javascript" src="<%=ServiceLocator.CDN%>/js/ui/MethodologyUsageInterpreter.js" ></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript">
	      google.load('visualization', '1.0', {'packages':['corechart']});
		</script>

		<title>Methodology Research Tool</title>
		<jsp:include page="<%=PageDirectory.ANALYTICS %>"></jsp:include>
	</head>
	<body class="variable-config">
		<script type="text/javascript">
			  $.get("<%=ServiceLocator.JSON_VARIABLE_LIST%>", function(data) {
				  var variables = $.parseJSON(data);
				  var interpreter = new UI.MethodologyUsageInterpreter();
				  interpreter.renderVariableListOn("#variable-list-container", variables);
			  });
		</script>
		
		<section id="variables-list-section" class="variables-list-section">
			<div class="return-button-container">
				<a href="/" class="button home-button">Back to Home</a>
			</div>
			<div id="variable-list-container" class="variable-list-container" ></div>
		</section>

		<section id="project-configuration-section" class="project-configuration-section">
			<div id="project-configuration-container" class="project-configuration-container" ></div>
		</section>

		<section id="report-usage-section" class="report-usage-section">
			<div id="report-usage-container" class="report-usage-container" ></div>
		</section>
		
		<footer>
			<jsp:include page="<%=PageDirectory.FOOTER%>"></jsp:include>
		</footer>

		<script type="text/javascript">
			  $("#project-configuration-section").hide();
			  $("#report-usage-section").hide();
		</script>
	</body>
</html>
